<%--
  Created by IntelliJ IDEA.
  User: 佟大为
  Date: 2018/7/12
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>欢迎登录飞车险</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/logo2.png" media="screen" />
    <!--<link rel="stylesheet" href="../css/general.css"/>-->
    <link rel="stylesheet" href="/static/css/form.css"/>
    <link rel="stylesheet" href="/static/css/background.css"/>

    <link rel="stylesheet" href="/static/js/plugins/jquery-easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="/static/js/plugins/jquery-easyui/themes/icon.css">
    <script src="/static/js/plugins/jquery-easyui/jquery.min.js"></script>
    <script src="/static/js/plugins/jquery-easyui/jquery.easyui.min.js"></script>

    <script src="/static/js/login/login.js" ></script>

    <script>
        //只有格式都正确才执行页面跳转事件
        function login(){
        if($("#pwdText").val()!="" && $("#usernameText").val()!=""){
            $("#loginForm").form("submit",{
                url:"/login",
                success:function (data) {
                    data = $.parseJSON(data);
                    if(data.success){
                        window.location.href="/index";
                    }else{
                        //登录失败操作
                        $.messager.alert("温馨提示", data.msg);
                    }

                }
            })
        }else{
            return false;
        }
        }
    </script>

    <link rel="stylesheet" type="text/css" href="/static/css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/htmleaf-demo.css">
    <style type="text/css">
        * {
            margin: 0; padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #container {
            overflow: hidden;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
        }

        #background_video {
            position: absolute;

            top: 50%; left: 50%;
            transform: translate(-50%, -50%);

            object-fit: cover;
            height: 100%; width: 100%;
        }

        #video_cover {
            position: absolute;

            width: 100%; height: 100%;

            background: url('static/img/video_cover.jpg') no-repeat;
            background-size: cover;
            background-position: center;
        }

        #video_controls {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }

        #play img {
            width: 100px;
        }
        #pause img {
            width: 90px;
        }
        #pause {
            display: none;
        }

        @media (min-width: 768px) {
            #video_controls {
                display: none;
            }
        }

        /* Demo page specific styles */

        body {
            text-align: center;
            font-family: 'proxima-nova', Helvetica;
        }

        #container {
            height: 100%;
        }

        #overlay {
            position: absolute;
            top: 0; right: 0; left: 0; bottom: 0;
            background: rgba(0,0,0,0.5);
        }

        #main_content {
            z-index: 2;
            position: relative;
            display: inline-block;

            /* Vertical center */
            top: 50%;
            transform: translateY(-50%);
        }

        #main_content h1 {
            text-transform: uppercase;
            font-weight: 600;
            font-family: 'proxima-nova-condensed', Helvetica;
            color: #fff;
            font-size: 35px;
        }

        #main_content .sub_head {
            color: rgba(255,255,255,0.5);
            font-size: 18px;
        }

        #main_content .info {
            color: rgba(255,255,255,0.5);
            font-size: 12px;
            margin-top: 10px;
        }

        #links {
            margin-top: 50px;
        }

        #links a {
            border: 2px solid rgba(255,255,255,0.20);
            border-radius: 61px;
            font-size: 12px;
            color: #FFFFFF;
            letter-spacing: 1px;
            text-decoration: none;
            text-transform: uppercase;
            padding: 10px 25px;
            display: inline-block;
            margin-right: 15px;
        }

        #footer {
            position: absolute;
            bottom: 0; left: 0; right: 0;
        }
        #footer a {
            color: rgba(255,255,255,0.5);
            text-decoration: none;
            margin: 10px;
            font-size: 12px;
        }
        #footer a:first-child {
            float: left;
        }
        #footer a:last-child {
            float: right;
        }
    </style>


</head>
<body>
<!--背景-->
<div id="container">
    <video id="background_video" loop muted></video>
    <div id="video_cover"></div>
    <div id="overlay"></div>

    <div id="video_controls">
	      <span id="play">
	        <img src="/static/img/play.png">
	      </span>
        <span id="pause">
	        <img src="/static/img/pause.png">
	      </span>
    </div>

    <section id="main_content">
        <!--主面板-->
        <div class="main1">
            <!--logo面板-->
            <div class="logo">
                <div class="logoText">秋名山车险</div>
            </div>

            <!--输入账号面板-->
            <form action="" method="post" id="loginForm">
                <div class="login">
                    <!--用户名-->
                    <div class="loginInput">
                        <div class="loginInputText"> 用户 </div>
                        <input id="usernameText" type="text" name="username" autocomplete="off"/>
                        <!--判断是否格式是否正确的提示框-->
                        <div class="prompt" id="usernameFlag">
                            <div class="prompt-triangle">◀</div>
                            <div class="prompt-square">
                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                <span id="usernameErrorText"></span>
                            </div>
                        </div>
                    </div>

                    <!--密码-->
                    <div class="loginInput loginInputLast">
                        <div class="loginInputText"> 密码 </div>
                        <input id="pwdText" type="password" name="password" autocomplete="off"/>
                        <!--判断是否格式是否正确的提示框-->
                        <div class="prompt" id="pwdFlag">
                            <div class="prompt-triangle">◀</div>
                            <div class="prompt-square">
                                <span class="glyphicon glyphicon-exclamation-sign"></span>
                                <span id="pwdErrorText"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <input type="button" onclick="login()" value="登 录" class="loginBtn"/>
            </form>
        </div>
    </section>
</div>

<script src="/static/js/login/bideo.js"></script>
<script src="/static/js/login/main.js"></script>

</body>
</html>
